<template>
  <div class="page-container">
    <div class="page-content">
      <div class="panel-container">
        <div class="panel-content">
          <el-tabs
            v-model="tabActive"
            @tab-click="handleTabClick"
          >
            <el-tab-pane
              v-for="item in tabList"
              :key="item.name"
              :label="item.label"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
          <!--搜索-->
          <SearchForm
            ref="SearchForm"
            style="margin-top: 10px"
            :search-form-arr="searchFormArr"
            @searchParma="searchParma"
          />
        </div>
      </div>
      <!--数据信息-->
      <div class="panel-container no-margin">
        <div
          class="panel-line flex-end"
          style="margin-bottom: 20px"
        >
          <el-button
            type="primary"
            @click="openApplyDialog"
          >
            + 申领客户
          </el-button>
        </div>
        <el-table
          ref="table"
          v-loading="dataListLoading"
          stripe
          :data="dataList"
          :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            fixed="left"
            width="55"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="公司名称"
            prop="ComName"
          >
            <template slot-scope="scope">
              <!-- 跳转到publish 带khid参数 -->
              <router-link
                :to="{ name: 'CluePublish', query: { khid: scope.row.khid } }"
              >
                <span class="text-link">
                  {{ scope.row.ComName }}
                </span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="客户"
            prop="LinkName"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="家乡"
            prop="address"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="来源"
            prop="source_name"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="意向"
            prop="new_mark_level"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="跟踪人"
            prop="follow_man_name"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="跟踪时间"
            prop="follow_time"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="最新批注"
            prop="new_mark_desc"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            header-align="center"
            label="批注时限"
            prop="mark_content"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="跟踪时限"
            prop="follow_content"
          />
          <el-table-column
            v-if="tabActive === 'my'"
            align="center"
            header-align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <!-- 下拉操作 1.设为特权 2.踢出 3.我要签单 4.生成收款码 5.添加到账信息 6.查看到账信息 -->
              <el-dropdown
                size="medium"
                @command="handleCommand"
              >
                <span class="el-dropdown-link">
                  操作
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    :command="{ event: 'handleSign', params: scope }"
                  >
                    我要签单
                  </el-dropdown-item>
                  <el-dropdown-item
                    :command="{ event: 'handleSetSpec', params: scope }"
                  >
                    <span v-if="scope.row.is_spec === 1">取消特权 </span>
                    <span v-else> 设为特权 </span>
                  </el-dropdown-item>
                  <el-dropdown-item
                    :command="{ event: 'handleKickOut', params: scope }"
                  >
                    释放线索
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          :current-page="pageNumber"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pageTotal"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
        />
      </div>
    </div>
    <!-- 踢出 -->
    <DialogKickOut
      ref="DialogkickOut"
      @temporaryKickOut="handleTemporaryKickOutEvent"
      @permanentKickOut="handlePermanentKickOutEvent"
    />
    <!-- 申领 -->
    <ApplyDialog
      ref="applyDialog"
      @apply-success="handleApplySuccess"
    />
  </div>
</template>

<script>
import {
  apiCustomeSearchList,
  apiCustomerSetSpec,
  apiCustomerKickOut,
  apiCustomerForeverOut
} from '@/api/clue'
import { getListName } from '@/utils'
import DialogKickOut from './components/DialogKickOut.vue'
import ApplyDialog from './components/ApplyDialog.vue'
import { CustomerIntentionList } from '@/utils/constant'

export default {
  name: 'ClueFollow',
  components: { DialogKickOut, ApplyDialog },
  data() {
    return {
      tabActive: 'my',
      tabList: [
        { name: 'my', label: '本人跟进线索清单' },
        { name: 'all', label: '全部跟进线索清单' }
      ],
      dataList: [],
      pageNumber: 1,
      pageSize: 10,
      pageTotal: 0,
      dataListLoading: false,
      searchFormArr: [
        {
          fieldName: '公司名称:',
          type: 'input',
          field: 'ComName',
          placeholder: '请输入公司名称'
        },
        {
          fieldName: '联系电话:',
          type: 'input',
          field: 'LinkPhone',
          placeholder: '请输入联系电话'
        },
        {
          fieldName: '来源:',
          type: 'select',
          field: 'Source',
          option: []
        },
        {
          fieldName: '线索意向:',
          type: 'select',
          field: 'new_mark_level',
          option: CustomerIntentionList.map((item) => {
            return { value: item.id, label: item.name }
          })
        }
      ],
      searchParams: {
        ComName: '',
        LinkPhone: '',
        Source: '',
        new_mark_level: ''
      },
      currentUserId: localStorage.getItem('feijiu_user_uid') || '',
      followManId: '',
      currentItem: null
    }
  },
  activated() {
    this.$refs.table.doLayout()
  },
  mounted() {
    this.init()
  },
  destroyed() {},
  methods: {
    init() {
      if (this.tabActive === 'my') {
        this.followManId = this.currentUserId
      }
      this.getSelectList()
      this.getDataList()
    },
    getSelectList() {
      this.$store.dispatch('select/getClueSource').then((res) => {
        const item = this.searchFormArr.find((item) => item.field === 'Source')
        item.option = res.source.map((item) => {
          return { value: item.id, label: item.title }
        })
      })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      let info = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        follow_man_id: this.followManId,
        sts: 1
      }
      info = Object.assign(info, this.searchParams)
      apiCustomeSearchList(info)
        .then((res) => {
          const { data, total } = res
          this.dataList = data
          this.pageTotal = total
          this.dataListLoading = false
          this.$refs.table.doLayout()
        })
        .catch((e) => {
          this.dataList = []
          this.pageTotal = 0
          this.dataListLoading = false
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNumber = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNumber = val
      this.getDataList()
    },
    // 列表查询
    searchParma(e) {
      this.searchFormArr.forEach((item) => {
        if (e[item.field]) {
          this.searchParams[item.field] = e[item.field]
        } else {
          this.searchParams[item.field] = ''
        }
      })
      this.pageNumber = 1
      this.getDataList()
    },
    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取列表名称
    getListName(list, id) {
      return getListName(list, id)
    },
    handleCommand({ event, params }) {
      this.currentItem = params.row
      this[event]()
    },
    // 设为特权
    handleSetSpec(scope) {
      this.dataListLoading = true
      apiCustomerSetSpec({
        khid: this.currentItem.khid,
        sts: this.currentItem.is_spec === 1 ? 2 : 1
      })
        .then((res) => {
          this.dataListLoading = false
          this.$message({
            type: 'success',
            message: '设置成功'
          })
          this.getDataList()
        })
        .catch(() => {
          this.dataListLoading = false
        })
    },
    // 踢出
    handleKickOut() {
      this.$refs.DialogkickOut.openDialog()
    },
    // 我要签单
    handleSign() {},
    handleTabClick() {
      if (this.tabActive === 'my') {
        this.followManId = this.currentUserId
      } else {
        this.followManId = ''
      }
      this.pageNumber = 1
      this.getDataList()
    },
    // 暂时踢出事件
    handleTemporaryKickOutEvent(data) {
      this.dataListLoading = true
      apiCustomerKickOut({ khid: this.currentItem.khid, reason: data.reason })
        .then((res) => {
          this.dataListLoading = false
          this.$message({
            type: 'success',
            message: '暂时踢出成功'
          })
          this.getDataList()
        })
        .catch(() => {
          this.dataListLoading = false
        })
    },
    // 永久踢出事件
    handlePermanentKickOutEvent(data) {
      this.dataListLoading = true
      apiCustomerForeverOut({
        khid: this.currentItem.khid,
        reason: data.reason
      })
        .then((res) => {
          this.dataListLoading = false
          this.$message({
            type: 'success',
            message: '永久踢出成功'
          })
          this.getDataList()
        })
        .catch(() => {
          this.dataListLoading = false
        })
    },
    // 打开申领客户弹窗
    openApplyDialog() {
      this.$refs.applyDialog.openDialog()
    },
    // 处理申领成功事件
    handleApplySuccess() {
      this.getDataList()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #5db42c;
}
</style>
